<template>
	<view class="Player">
		<nav-bars backState="1000" bgColor="#fff" fontColor="#000" :title="navBarTitle"></nav-bars>
		<!-- <view class="tabsList" style="position: fixed;z-index: 99;width: 100%;box-sizing: border-box;flex: 1;border-bottom: 1px solid #eee;" v-show="navBarTitle != '话题'">
			<u-tabs
				:bar-style="tabsBottomStyle"
				:list="list"
				inactive-color="#939393"
				active-color="#333333"
				:is-scroll="true"
				font-size="28"
				:current="current"
				@change="TabsChange"
			></u-tabs>
		</view> -->
		<!-- list列表 -->
		<view class="live" v-show="navBarTitle != '话题'">
			<view class="liveView" v-if="liveArr.length !== 0">
				<view class="liveItem" v-for="(item, index) in liveArr" :key="index" @click="GoLiveRoom(item.roomid)">
					<view class="livePic">
						<image :src="item.cover_img" mode=""></image>
						<view class="liveLook">
							<view class="liveLookIcon" v-if="item.live_status == 102 || item.live_status == 101 || item.live_status == 103">
								<image v-if="item.live_status == 102" :src="`${baseImg}/static/adminShop/liveyuyue.png`" mode=""></image>
								<image v-if="item.live_status == 101" :src="`${baseImg}/static/adminShop/livelook.png`" mode=""></image>
								<image v-if="item.close_replay == 0 && item.live_status==103" :src="`${baseImg}/static/adminShop/playBack.png`" mode=""></image>
								<image v-if="item.close_replay == 1 && item.live_status==103" :src="`${baseImg}/static/adminShop/livelook.png`" mode=""></image>
								
							</view>
							<view class="liveLookText">
								<text v-if="item.live_status == 102">预约中</text>
								<text v-if="item.live_status == 101">正在直播</text>
								<text v-if="item.close_replay == 0 && item.live_status==103">直播回放</text>
								<text v-if="item.close_replay == 1 && item.live_status==103">已结束</text>
							</view>
						</view>
						<view class="liveStatus">
							<view class="liveColor" v-if="item.live_status == 102" style="background: #e89a1d;"></view>
							<view class="liveColor" v-if="item.live_status == 101" style="background: #2bf1ce;"></view>
							<view class="liveColor" v-if="item.live_status == 103" style="background: #F12B2B;"></view>
							<view class="liveStatusText">
								<text v-if="item.live_status == 102">预约中</text>
								<text v-if="item.live_status == 101">直播中</text>
								<text v-if="item.live_status == 103">已结束</text>
							</view>
						</view>
					</view>
					<view class="liveTitle ">
						<view class="ellipsisText">{{ item.name }}</view>
					</view>
				</view>
			</view>
			<view v-else style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);">
				<u-empty text="暂无数据" mode="list" icon-size="550" src="https://cos.ryz1620.com/liankun/static/nullBg.png"></u-empty>
			</view>
			<view style="flex: 1;padding: 10rpx 0;" v-if="liveArr.length > 6"><u-loadmore :status="loadStatus"></u-loadmore></view>
		</view>
		</view>
	</view>
</template>

<script>
import URL from '@/config/url.js';
import navBar from '@/components/navBar/navBar.vue';
// import service_mall from '@/service/mall.js';
import service_player from '@/service/player.js';
export default {
	data() {
		return {
			list: [],
			tabsBottomStyle: {
				'border-radius': ' 4rpx 4rpx 0rpx 0rpx',
				width: '40rpx',
				height: '8rpx',
				background: '#FFD425'
			},
			current: 0,
			currentTabsid: '', //分类id
			liveArr: [],
			ishide: false,
			token: '',
			tabsheight: 45,
			currentPage: 1,
			navBarTitle: '话题',
			DataList: [],
			baseImg: this.$static,
			loadStatus: 'loadmore',
			isHide: false,
			pagesize:10,
		};
	},
	onShareAppMessage(res) {
		let that = this;
		if (res.from === 'button') {
		}
		// return {
		// 	title: this.ShareAppTitle,
		// 	path: '/pages_design/pages/design/dynamic/player?trendId=' + this.trend_id + '&share_uid=' + this.userId,
		// 	success: function(res) {
		// 		that.getgetforwards();
		// 	}
		// };
	},
	onShareTimeline(res) {
		if (res.from === 'menu') {
		}
		// return {
		// 	title: this.ShareAppTitle,
		// 	path: '/pages_design/pages/design/dynamic/player?trendId=' + this.trend_id + '&share_uid=' + this.userId,
		// 	success: function(res) {
		// 		that.getgetforwards();
		// 	}
		// };
	},
	created() {},
	mounted() {},
	onReady() {
		var value = uni.getStorageSync('LiveConfig');
		this.navBarTitle = value != '' ? value : '话题';
	},
	onLoad() {
		this.$utils.getUrl();
	},
	onShow() {
		var that = this;
		var value = uni.getStorageSync('LiveConfig');
		this.token = uni.getStorageSync('token');
		this.currentPage = 1;
		that.getLvieList()
	},
	onReachBottom() {
		var that = this;
		that.currentPage++;
		that.loadStatus = 'loading';
		uni.showLoading({
			title: '加载中...'
		});

		let params = {
			page: that.currentPage
		};
		service_player
			.getQYLiveList(params)
			.then(res => {
				if (res.code == 1) {
					let data = res.data.list;
					// that.liveArr = data;
					if (!res.data.length) {
						that.loadStatus = 'nomore';
						return;
					} else {
						that.loadStatus = 'loadmore';
					}
					// that.liveArr = that.liveArr.concat(data)
				}
			})
			.catch(err => {});
		setTimeout(() => {
			uni.hideLoading();
		}, 500);
	},
	methods: {
		gitdetail(id) {
			uni.navigateTo({
				url: '/pages_now/pages/now/article/detail?id=' + id
			});
		},
		//tabs的切换
		TabsChange(index) {
			this.currentPage = 1;
			this.current = index;
			this.currentTabsid = this.list[index].cate_id;
			uni.showLoading({
				title: '加载中...'
			});
			setTimeout(() => {
				this.getLvieList();
				uni.hideLoading();
			}, 200);
		},
		getTabsList() {
			var that = this;
			uni.showLoading({
				title: '加载中...'
			});
			service_player
				.getWXLvieCate({})
				.then(res => {
					if (res.code == 1) {
						let data = res.data.list;
						if (data.length) {
							data.forEach((item, index) => {
								item.name = item.cate_name;
							});
							that.current = 0;
							that.currentTabsid = data[0].cate_id;
							that.currentPage = 1;
							that.list = data;
							that.getLvieList();
						} else {
							that.list = [];
						}
						uni.hideLoading();
					} else {
						this.$utils.showErr({
							title: res.msg
						});
					}
				})
				.catch(err => {
					this.$utils.showErr({
						title: err
					});
				});
		},
		// 获取视频列表
		getLvieList(ispush) {
			var that = this;
			let params = {
				page: that.currentPage,
				pagesize: that.pagesize
			};
			service_player
				.getXcxLiveList(params)
				.then(res => {
					if (res.code == 1) {
						let data = res.data.wxLivePlayers;
						// console.log(data);
						that.liveArr = data;
					} else {
						that.liveArr = [];
						this.$utils.showErr({
							title: res.msg
						});
					}
				})
				.catch(err => {
					this.$utils.showErr({
						title: err
					});
				});
		},
		GoLiveRoom(id) {
			var that = this;
			if (!this.token) {
				uni.showModal({
					title: '提示！',
					content: '请先登录！',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages_login/pages/login/login/index'
							});
						} else if (res.cancel) {
						}
					}
				});
			} else {
				uni.navigateTo({
					url: '/pages/livePlayer/index/index?id='+id
				});
			}
		}
	}
};
</script>

<style lang="scss">
page {
	// background: #fff;
}
.ellipsisText {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.Player {
	.live {
		padding: 32rpx;
		margin-top:24rpx;
		box-sizing: border-box;
		.liveView {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			flex-wrap: wrap;
			.liveItem {
				background: #fff;
				border-radius: 12rpx;
				overflow: hidden;
				box-shadow: 0rpx 3rpx 18rpx 0rpx rgba(206, 202, 198, 0.2);
				width: 334rpx;
				margin-bottom: 20rpx;
				.livePic {
					width: 334rpx;
					height: 326rpx;
					border-radius: 10rpx 10rpx 0rpx 0rpx;
					overflow: hidden;
					position: relative;
					.liveLook {
						position: absolute;
						top: 20rpx;
						left: 16rpx;
						display: flex;
						align-items: center;
						background: rgba(0, 0, 0, 0.4);
						box-shadow: 0rpx 3rpx 18rpx 0rpx rgba(206, 202, 198, 0.2);
						border-radius: 24rpx;
						padding-right: 16rpx;
						.liveLookIcon {
							width: 44rpx;
							height: 44rpx;
							overflow: hidden;
						}
						.liveLookText {
							font-size: 20rpx;
							font-weight: 500;
							color: #ffffff;
							margin-left: 10rpx;
						}
					}
					.liveStatus {
						position: absolute;
						bottom: 20rpx;
						right: 20rpx;
						display: flex;
						align-items: center;
						background: rgba(0, 0, 0, 0.4);
						padding: 4rpx 10rpx;
						border-radius: 24rpx;
						.liveColor {
							width: 10rpx;
							height: 10rpx;
							border-radius: 50%;
							margin-right: 10rpx;
						}
						.liveStatusText {
							font-size: 24rpx;
							font-weight: bold;
							color: rgba(254, 254, 254, 0.8);
						}
					}
				}
				.liveTitle {
					padding: 28rpx 21rpx;
					border-radius: 10rpx 10rpx 0rpx 0rpx;
					margin-top: -10rpx;
					background: #fff;
					font-size: 26rpx;
					font-weight: 500;
					position: relative;
					color: #242424;
				}
			}
		}
	}
}
</style>
